<template>
    <div class="page-container">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <h3>交易记录</h3>
            <div>
              <el-button type="primary" icon="Plus">新增交易</el-button>
            </div>
          </div>
        </template>
        
        <div class="filter-section">
          <el-form :inline="true" :model="filterForm">
            <el-form-item label="交易类型">
              <el-select v-model="filterForm.type" placeholder="请选择">
                <el-option label="全部" value="" />
                <el-option label="收入" value="income" />
                <el-option label="支出" value="outcome" />
              </el-select>
            </el-form-item>
            <el-form-item label="交易状态">
              <el-select v-model="filterForm.status" placeholder="请选择">
                <el-option label="全部" value="" />
                <el-option label="已完成" value="已完成" />
                <el-option label="处理中" value="处理中" />
                <el-option label="已取消" value="已取消" />
                <el-option label="失败" value="失败" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <el-table :data="transactions" style="width: 100%">
          <el-table-column prop="id" label="交易号" width="180" />
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="recipient" label="收款方" />
          <el-table-column prop="amount" label="金额" align="right" width="140">
            <template #default="{ row }">
              <span :class="row.type === 'income' ? 'income-amount' : 'outcome-amount'">
                {{ row.type === 'income' ? '+' : '-' }}¥{{ formatCurrency(row.amount) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)" size="small">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button size="small">详情</el-button>
              <el-button size="small" type="danger" v-if="row.status === '处理中'">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="loadData"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { formatCurrency, getStatusType } from '../util/util'
  
  const filterForm = reactive({
    type: '',
    status: '',
    dateRange: []
  })
  
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
  })
  
  const transactions = ref([
    { id: 'TX20230714001', date: '2023-07-14', recipient: '腾讯云服务', amount: 1250.00, type: 'outcome', status: '已完成' },
    { id: 'TX20230713002', date: '2023-07-13', recipient: '客户A公司', amount: 8500.00, type: 'income', status: '已完成' },
    { id: 'TX20230712003', date: '2023-07-12', recipient: '阿里云服务', amount: 3200.00, type: 'outcome', status: '处理中' },
    { id: 'TX20230711004', date: '2023-07-11', recipient: '客户B公司', amount: 5600.00, type: 'income', status: '已完成' },
    { id: 'TX20230710005', date: '2023-07-10', recipient: '服务器托管', amount: 1800.00, type: 'outcome', status: '已完成' }
  ])
  
  const loadData = () => {
    // 模拟API调用
    console.log('加载数据', filterForm, pagination)
  }
  
  const resetFilter = () => {
    filterForm.type = ''
    filterForm.status = ''
    filterForm.dateRange = []
    loadData()
  }
  
  const handleSizeChange = (size: number) => {
    pagination.pageSize = size
    loadData()
  }
  
  onMounted(() => {
    loadData()
  })
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
    
    .income-amount {
      color: #67C23A;
      font-weight: bold;
    }
    
    .outcome-amount {
      color: #F56C6C;
      font-weight: bold;
    }
  }
  </style>../util/util